<template>
    <div class="com-cnt">
        <ul class="nav-cnt">
            <li
             class="nav-item"
             v-for="(item, index) in items"
             :key="index"
             :class="nowIndex == index ? 'nav-item-cur' : ''"
             @click="updatePage(index)"
            >
                <span class="info">{{item}}</span>
            </li>  
        </ul>
    </div>
</template>

<script>
    export default {
        name: "navcomponent",
        props: {
            items: Array
        },
        data ( ) {
            return {
                nowIndex: 0,
            }
        },
        mounted() {
            // 接收swiper组件发射的index进行导航按钮切换高亮和更新模板地址
            this.$root.eventHub.$on('slideTab', this.slideTab);
        },        
        methods: {
            updatePage ( i ) {
                this.nowIndex = i
                // 点击导航按钮时向swiper组件发射index
                this.$root.eventHub.$emit('changeTab', i);                
            },
            slideTab(index) {
                this.nowIndex = index
            }            
        }        
    }
</script>

<style lang="stylus" scoped>
.com-cnt
    width 100%
    height auto 
    overflow hidden
    .nav-cnt
        width 100%
        height 45px
        line-height 45px
        text-align center
        display flex
        background-color #fff
        overflow hidden
        .nav-item 
            flex 1
            position relative
            &:before 
                content ""
                display block
                width 0
                height 2px
                background-color #ffd351
                position absolute
                left 0
                bottom 0
                transition all .5s ease-in-out 
            .info 
                display block 
                width 100%
                height 45px
                line-height 45px
                font-size 16px
                color #999
        .nav-item-cur 
            .info 
                transition all .5s ease-in-out
                color #ffd351
            &:before 
                width 100%             
</style>